<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>服务评价</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="UC_style.css">
    <style>
        #header2 {
            height: 40px;
            background: white;
        }

        .main {
            width: 100%;
            height: 800px;
            background: RGB(239,239,239);
            float: left;
        }

        h3 {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
            color: black;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            text-align: left;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            text-align: center;
        }

        th {
            background-color: #ddd;            
        }

        .button3 {
            color: black;
            width: 50%;
            border: none;
            text-align: left;
            font-size: 16px;
            text-align: center;
        }

            .button3:hover {
                background-color: #ddd;
            }

        .black_overlay {
            display: none; /* 此元素不会被显示*/
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001; /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
            opacity: 0.8;
            opacity: .80; /* opacity 属性设置元素的不透明级别。*/
            filter: alpha(opacity=88);
            /* 所有浏览器都支持 opacity 属性。   注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。*/
        }

        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 55%;
            height: 55%;
            padding: 20px;
            border: 10px solid #00ffff;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
        .box {
            width: 250px;
            height: 50px;
            border: 2px solid #9acd32;
            display: flex;
            top: 0px;
            left: 10px;
        }

            .box img {
                width: 50px;
                height: 50px;
            }
        textarea {
            width: 100%;
            height: 220px;
            padding: 5px;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            resize: none;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="header2">
            <img src="img/frist.png" alt="Big Boat" width="30" height="30" style=" vertical-align: middle;">
            乘客用车管理 > 服务评价
        </div>
        <h3>用车服务评价</h3>
        <table>
            <thead>
                <tr>
                    <th>单号</th>
                    <th>车辆类型</th>
                    <th>开始日期</th>
                    <th>结束日期</th>
                    <th>车辆用途</th>
                    <th>司机</th>
                    <th>服务评价</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>10086</td>
                    <td>商务车</td>
                    <td>2021-01-01</td>
                    <td>2021-01-05</td>
                    <td>出差开会</td>
                    <td>张三</td>
                    <td>
                        <button id="aaa" class="button3" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">评价</button>
                    </td>
                </tr>
                <tr>
                    <td>10087</td>
                    <td>小轿车</td>
                    <td>2021-02-01</td>
                    <td>2021-02-05</td>
                    <td>接待客户</td>
                    <td>李四</td>
                    <td>
                        <button id="aaa" class="button3" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">评价</button>
                    </td>
                </tr>
                <tr>
                    <td>10095</td>
                    <td>越野车</td>
                    <td>2021-03-01</td>
                    <td>2021-03-05</td>
                    <td>接待客户</td>
                    <td>王五</td>
                    <td>
                        <button id="aaa" class="button3" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">评价</button>
                    </td>
                </tr>
                <tr>
                    <td>10186</td>
                    <td>小轿车</td>
                    <td>2021-04-01</td>
                    <td>2021-04-02</td>
                    <td>工程抢修</td>
                    <td>辛六</td>
                    <td>
                        <button id="aaa" class="button3" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">评价</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="light" class="white_content">
            <p style="font-size:20px">服务评分：</p>
            <br />
            <!-- 登陆部分代码 -->
            <div class="box">
                <img src="img/star.png" alt="">
                <img src="imgh/star.png" alt="">
                <img src="img/star.png" alt="">
                <img src="img/star.png" alt="">
                <img src="img/star.png" alt="">
            </div>
            <br />
            <br />
            <p style="font-size:20px">评价：</p>
            <br />
            <textarea id="comment" name="comment" style="border:3px solid #d2d2d2;"></textarea>
            <button style="height:40px;width:80px;font-size:20px;margin-right:30px" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">确定</button>
            <button style="height:40px;width:80px;font-size:20px" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</button>
        </div>
        <div id="fade" class="black_overlay"></div>
    </div>

    <script>
        var num = 0;//默认点亮个数
        $item = $('.box').find('img');//获取的所有img
        //点亮星星函数
        var dianLiang = function (num) {
            $item.each(function (index) { //遍历所有img,即所有星星
                if (index < num) {
                    $(this).attr('src', 'img/star2.png') //点亮
                } else {
                    $(this).attr('src', 'img/star.png') //未点亮
                }
            })
        }
        //初始化,默认点亮2颗
        dianLiang(num)
        // 绑定事件
        $item.on('mouseover', function () {
            let index = $(this).index() * 1 + 1
            dianLiang(index)
            $('.text span').text(index)
        }).on('click', function () {
            let index = $(this).index() * 1 + 1
            dianLiang(index);
            $('.text span').text(index)
            num = index
        })
        $('.box').on('mouseout', function () {
            dianLiang(num)
        })
    </script>
</body>       
</html> 